<%@ page contentType="text/html; charset=UTF-8"%>
<%@ include file="../include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>资源健康度分析</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="pragma" content="no-cache"/>
	<meta http-equiv="cache-control" content="no-cache"/>
	<meta http-equiv="expires" content="0"/>  
	<%@ include file="../include/common.jsp"%>
	<script type="text/javascript" src="${pageContext.request.contextPath}/resources/charts/FusionCharts.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/calendar/zh_CN_WdatePicker.js"></script>
	<script type="text/javascript">
	function createChart(values,type)
	{
		var category="";
		var val = "";
	

		for(var i=0; i<values.length; i++){
			var v = values[i];
			category+=" <category label='"+v.time+"' ></category>";
		    val+=" <set value='"+v.degree+"' />";
		}
		labelStep = 1;
		if(values.length>7){
			labelStep=4;
		}
		var str="<?xml version='1.0' encoding='GBK'?>";
		str+="<chart  showNames='0'  yAxisMinValue='0' yAxisMaxValue='100' showLimits='1' showLegend='0' canvasBorderThickness='1'";
		str+=" showDivLineValue='1' showTickMarks='1'  lineThickness='2' showValues='0'  showLabels ='1' ";
		str+=" formatNumberScale='0' anchorRadius='2'   divLineAlpha='20' divLineColor='CC3300'";
		str+=" divLineIsDashed='0' showAlternateHGridColor='1' alternateHGridAlpha='5' alternateHGridColor='CC3300'";
		str+=" shadowAlpha='40' labelStep='"+labelStep+"'   numDivLines='4' chartTopMargin='5' chartBottomMargin='5'";
		str+=" chartLeftMargin='5' chartRightMargin='5' bgColor='FFFFFF,CC3300' bgAngle='270' bgAlpha='10,10'>";
		str+="<categories>";
		str+=category;
		str+="</categories>";
		str+="<dataset seriesName='平均值'  color='2AD62A' anchorBorderColor='2AD62A' anchorBgColor='2AD62A'>";
		str+=val;
		str+="</dataset>";

		currentval = values.currentval;
		if(currentval!=null){
			str+=" <trendlines>";
			str+=" <line startValue='"+currentval+"' isTrendZone='0'  color='FF0000'  dashed='2' dashGap='5'/>";
			str+=" </trendlines>";
		}
		str+="</chart>";
		var t = new Date().getMilliseconds();
		cpuHisLine =  new FusionCharts("${pageContext.request.contextPath}/resources/charts/MSLine.swf", "cpuHisLine"+t, "700", "120", "0", "1" );
		cpuHisLine.setDataXML(str);
		cpuHisLine.render("chart1");
	}
	function createChart2(values,type)
	{
		var category="";
		var val = "";
	
		var dataset1 = "";
		var dataset2 = "";
		var dataset3 = "";
		var dataset4 = "";
		var dataset5 = "";
		for(var i=0; i<values.length; i++){
			var v = values[i];
			category+=" <category label='"+v.time+"' ></category>";
		    dataset1+=" <set value='"+v.normal+"' />";
		 	dataset2+=" <set value='"+v.minor+"' />";
		 	dataset3+=" <set value='"+v.warn+"' />";
		 	dataset4+=" <set value='"+v.major+"' />";
		 	dataset5+=" <set value='"+v.critical+"' />";
		}
		var str="<?xml version='1.0' encoding='GBK'?>";
		str+=" <chart palette='1' plotSpacePercent='50' caption='状态时长统计' shownames='1' showvalues='0'   decimals='0' useRoundEdges='1' >";
		str+="<categories>";
		str+=category;
		str+="</categories>";
		str+="<dataset seriesName='critical'  color='ce110f' showValues='0'>";
		str+=dataset5;
		str+="</dataset>";
		str+="<dataset seriesName='major'  color='ff9937' showValues='0'>";
		str+=dataset4;
		str+="</dataset>";
		str+="<dataset seriesName='warn'  color='dede03' showValues='0'>";
		str+=dataset3;
		str+="</dataset>";
		str+="<dataset seriesName='minor'  color='56a8f4' showValues='0'>";
		str+=dataset2;
		str+="</dataset>";
		str+="<dataset  seriesName='normal' color='2cb900' showValues='0'>";
		str+=dataset1;
		str+="</dataset>";
		str+="</chart>";
		var t = new Date().getMilliseconds();
		cpuHisLine =  new FusionCharts("${pageContext.request.contextPath}/resources/charts/StackedBar2D.swf", "cpuHisLine"+t, "700", "600", "0", "1" );
		cpuHisLine.setDataXML(str);
		cpuHisLine.render("chart2");
	}
	function choose(type)
	{
		$.ajax({
			type:'post',
			url:'res-healthy!findResHealthData.action',
			data:{choose:type,id:'${res.id}'},
			global:false,
			async:false,
			cache:false,
			dataType:'json',
			success:function(data,textStatus){
				createChart(data,type);	
				createChart2(data,type);
			}
		});	
	}
	$(document).ready(function() {
		choose(1);
	});
	</script>
  </head>
  
  <body>
	 <div class="searchFormStyle" id="searchParameter" >
	 		<div>
			<span>统计范围：</span>
		    	<span>
		    		<a href="#" onclick="choose(1)">近24小时</a>
		    		<a href="#" onclick="choose(7)">近7天内</a>
		    		<a href="#" onclick="choose(30)">近一个月</a>
		    		<a href="#" onclick="choose(9)">其它时间</a>
		    		<span id="otherTimeSp" style="display:inline;">
		    			<input id="beginDate" name="beginDate" class="Wdate" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH 时',maxDate:'%y-%M-%d %H'})"/>
						<label>-</label>
						<input id="endDate" name="endDate" class="Wdate" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH 时',maxDate:'%y-%M-%d %H',minDate:$('#beginDate').val()})"/>
		    			<input type="button" onclick="search();" value="统计" class="searchFormButtonStyle">
		    		</span>
		    	</span>
			</div>
	 </div>
<div>健康度历史值</div>
<div id="chart1">
	
</div>
<div id="chart2">
	
</div>
  </body>
</html>
